﻿var list_online = new Array();
var _history = new Array();
var objCurrent = {
    userid: 1,
    username :"quangphuc"
}

ObjChat = function (usersend,user_receive,msg,type) {
    this.usersend = usersend;
    this.user_receive = user_receive;
    this.msg = msg;
    this.type = type;
}

function appendListOnline() {
    var objUser = Editor.read(Editor.login);
    if (objUser != null) {
        objCurrent.userid = objUser.userid;
        objCurrent.username = objUser.username;
        if (list_online.contains(objCurrent) === false) {
            list_online.push(objCurrent);
        }
        socket.emit('adduser', objCurrent, window.location.host);
        list_online.push(objUser.username);
    }
    else {
        location.href = Editor.Url + "/login";
    }    
}

function addusersOnline(online) {
    var html = "";    
    for (var i = 0; i < online.length; i++) {
        var item = online[i];
        html += "<b class=\"first\" style=\"position:relative;left:5px;background:#40C012;border-radius:12.5px;display:block;float:left;height:12.5px;width:12.5px;top:2px;\">";
        html += "</b>";
        if (item === objCurrent.username) {
            html += "<b class=\"first\" style=\"color:#1C94C4;position:relative;left:10px;\">";
            html += online[i];
            html += "</b><br/>";
        }
        else {
            html += "<b class=\"first\" style=\"color:orange;position:relative;left:10px;\">";
            html += online[i];
            html += "</b><br/>";
        }
    }
    $("#users").html(html);
}
function memOffline(obj) {
    var _index = list_online.indexOf(obj)
    if (_index != -1) {
        list_online.splice(_index, 1);
    }
    var html = "";
    for (var i = 0; i < list_online.length; i++) {
        var item = list_online[i];
        html += "<b class=\"first\" style=\"position:relative;left:5px;background:#40C012;border-radius:12.5px;display:block;float:left;height:12.5px;width:12.5px;top:2px;\">";
        html += "</b>";
        if (item.username === objCurrent.username) {
            html += "<b class=\"first\" style=\"color:#1C94C4;position:relative;left:10px;\">";
            html += list_online[i];
            html += "</b><br/>";
        }
        else {
            html += "<b class=\"first\" style=\"color:orange;position:relative;left:10px;\">";
            html += list_online[i];
            html += "</b><br/>";
        }
    }
    $("#users").html(html);
}

function receiveMsg(obj,msg) {
    var str = "";
    if (obj === objCurrent.username) {
        str = "<span class='current-message'><b><a style='color:#1C94C4;'>" + objCurrent.username + " :&nbsp; </a></b>";
        str += String(msg);
        str += "</span><br/>"
    }
    else {
        str = "<span class='current-message'><b><a style='color:orange;'>" + obj + ":&nbsp;</a></b>";
        str += String(msg);
        str += "</span><br/>"
    }
    var objDiv = document.getElementById("messages");//messages    
    if (objDiv != null) {
        objDiv.scrollTop = objDiv.scrollHeight;
    }
    return str;
}



function onchat(username,id) {
    var objName = objCurrent.username + "_" + username;

    createLayoutChat(objName, username);
}

function createLayoutChat(objName, username) {
    $("#tbchats").show();
    var myObj = document.getElementById(objName);    
    if (myObj == null) {        
        var html = renderLayoutChat(objName, username);
        $("#chats").append(html);
        $("#a_" + objName).keypress(function (event) {
            if (event.keyCode == 13) {             
                sendchatsPrivate(objName);
            }
        });
        $('#btn_' + objName).click(function () {
            sendchatsPrivate(objName);
        });
    }
}

function onSetBut(objName) {
    var mess = String($("#a_" + objName).val());
    $("#messages_" + objName).append(mess);
}

function sendchatsPrivate(objName) {
    var usernames = objName.split('_');
    var user_receive;
    user_receive = {
        userid: 2,
        username: "kimngan"
    }
    var user_send = objCurrent;
    if (usernames.length == 2) {
        if (usernames[0] === objCurrent.username) {
            user_receive = {
                userid : 2,
                username: usernames[1]
            }
        }
        else {
            user_receive = {
                userid: 2,
                username: usernames[0]
            }
        }
    }
    var mess = String($("#a_" + objName).val());
    if (mess != "" && mess.length >= 1) {
        obj = new ObjChat(objCurrent, user_receive, mess, false);
        var data = {
            objName: "chat",
            obj: obj,
            type: false
        }
        socket.emit('sendchat', data);
        $("#a_" + objName).val("");
        receiveMsgPrivate(objCurrent.username, objName, mess);
    }
}

function receiveMsgPrivate(obj, objName, msg) {
    var str = "";
    if (obj === objCurrent.username) {
        str = "<span class='current-message'><b><a style='color:#1C94C4;'>" + objCurrent.username + " :&nbsp; </a></b>";
        str += String(msg);
        str += "</span><br/>"
    }
    else {
        str = "<span class='current-message'><b><a style='color:orange;'>" + obj + ":&nbsp;</a></b>";
        str += String(msg);
        str += "</span><br/>"
    }
    $("#messages_" + objName).append(str);
    var objDiv = document.getElementById("messages_" + objName);    
    if (objDiv != null) {
        objDiv.scrollTop = objDiv.scrollHeight;
    }    
}

function fnClose(objName) {
    $("#" + objName).remove();
    //$("#" + objName).hide();
    console.log("close : " + objName);
}

function sendChat(user) {
    var user_receive = {
        userid: 2,
        username: "kimngan"
    }
    var mess = "";
    if (user === objCurrent) {
        mess = String($("#a-input-chat").val());
        //mess = trim(mess);
        if (mess != "" && mess.length >= 1) {
            obj = new ObjChat(objCurrent, user_receive, $("#a-input-chat").val(), true);
            var data = {
                objName: "chat",
                obj: obj,
                type: true
            }
            socket.emit('sendchat', data);
        }
        $("#a-input-chat").val("");
    }
    else {

    }
}

function renderLayoutChat(obj,name) {
    var html = "";
   
    html = '<td id ="' + obj + '" class="itemchat"  style="width:250px;">';//style="display:none;"
    html += '<div  id ="chat1_' + obj + '" class="main">';
    html += '<table class="table table-striped table-bordered bootstrap-datatable datatable" style="overflow:hidden;width:250px;" >';
    html += "<tbody>";
    html += '<tr>';
    html += '<td style="width:100%;border-right:1px solid red;">'
    html += '<div id="header_' + obj + '" ><b>' + name + '</b><a class="close" onclick="fnClose(\'' + obj + '\')">Đóng</a> </div>'
    html += '<div id="messages_'+ obj +'" style="height:200px;overflow:auto;padding-bottom:25px;">'
    html += '</div>'
    html += '</td>'
    html += '</tr>'
    html += '<tr>'
            + '<td style="width:100%;border-right:1px solid red;">'
            + '<div class="controls">'
            + '<textarea id= "a_'+ obj +'"  style="width:75%" class="input-chat"></textarea>'
            + '<input type="submit" id="btn_' + obj + ' value="Send" style="height:45px;width:20%"  class="send-chat" onclick="onSetBut(\'' + obj + '\')">'
            + '</div>'
            + ' </td>'
            + '</tr>'
            + '</tbody>'
            + '</table>'
            + '</div>'
            + '</td>';
  
    return html;
}

$(document).ready(function () {
    
    appendListOnline(objCurrent);
    $('#a-send-chat').click(function () {        
        sendChat(objCurrent);
    });
    $("#users a").click(function () {
        console.log(this.id);
    });
    $("#a-input-chat").keypress(function (event) {
        if (event.keyCode == 13) {
            sendChat(objCurrent);
            event.preventDefault();
        }
    });
});
